import { getColor, rgbOpacity, colorCursor } from '../config.js';
let targetParam;
// 取色器
let cursorDarg = false; //是否可以拖拽
let cursor = {
  top: 0,
  right: 0
};
let color = 'rgba(255,0,0,1)'; // 当前颜色值
let colorText = ''; // 输入显示值
// 取色滑块
let thumbDarg = false; //是否可以拖拽
let thumbTop = 0; // 取色滑块位置
let thumbColor = color; // 取色值
// 透明滑块
let pellucidityDarg = false; //是否可以拖拽
let pellucidityRight = 0; // 透明滑块位置
export let outside = false;
const pickercId = 'ui-pickerc'; // 组件id
const cancelClassName = 'luckysheet-mousedown-cancel'; // 隐藏屏蔽
let mode = 'right'; // 布局模式
let pickercOption; // 外抛监听对象
const htmlText = `<div class="ui-pickerc-content ${cancelClassName}">
        <div class="ui-pickerc-panel ${cancelClassName}">
          <div style="background:${color}" class="ui-pickerc-panel-left ${cancelClassName}">
            <span id="ui-pickerc-panel-left-cursor" style="top:${cursor.top}px;right:${cursor.right}px;" class="ui-pickerc-panel-left-cursor ${cancelClassName}"></span>
          </div>
          <div class="ui-pickerc-panel-right ${cancelClassName}">
            <div class="ui-pickerc-silder ${cancelClassName}">
              <span id="ui-pickerc-silder-thumb" class="${cancelClassName} ui-pickerc-silder-thumb"></span>
            </div>
          </div>
        </div>
        <div class="ui-pickerc-pellucidity ${cancelClassName}">
          <div style="background:linear-gradient(to right, rgba(12, 244, 115, 0) 0%,${thumbColor} 100%)" id="ui-pickerc-pellucidity-bg" class="ui-pickerc-pellucidity-bg ${cancelClassName}"></div>
          <span id="ui-pickerc-pellucidity-thumb" class="ui-pickerc-pellucidity-thumb ${cancelClassName}"></span>
        </div>
        <div class="ui-pickerc-footer ${cancelClassName}">
          <input class="${cancelClassName}" value="${color}" readOnly type="text" placeholder="选取颜色" />
          <div class="ui-pickerc-footer-right ${cancelClassName}">
            <span class="ui-pickerc-footer-board ${cancelClassName}">
              <span id="ui-pickerc-footer-board-bg" class="ui-pickerc-footer-board-bg ${cancelClassName}" style="background:${color}"></span>
            </span>
            <span id="ui-pickerc-footer-reset" class="ui-pickerc-footer-reset ${cancelClassName}">
              重置
            </span>
            <span id="ui-pickerc-footer-confirm" class="ui-pickerc-footer-confirm ${cancelClassName}">确认</span>
          </div>
        </div>
      </div>`;
// 元素选择器
export const $ = function $(className) {
  if (!className) {
    return null;
  }
  const name = className.substring(1);
  switch (className[0]) {
    case '.':
      return document.getElementsByClassName(name);
    case '#':
      return document.getElementById(name);
    default:
      return document.getElementsByTagName(name);
  }
};
export function init(value, option) {
  pickercOption = option;
  targetParam = value;
  const target = $(`#${targetParam.id}`);
  const dom = document.createElement('div');
  dom.id = pickercId;
  dom.className = `ui-pickerc ${cancelClassName}`;
  dom.style.cssText = `left: ${target.offsetLeft}px;top: ${target.offsetTop + target.clientHeight}px`;
  dom.innerHTML = htmlText;
  target.appendChild(dom);
  target.onmouseenter = () => {
    opsitionFn(value);
  };
  // 绑定事件
  const contents = dom.children[0];
  // 绑定点击判空
  window.addEventListener('mouseup', onSpaceFn);
  // 绑定事件-确认
  $('#ui-pickerc-footer-confirm').onclick = () => {
    confirmFn();
  };
  // 绑定事件-重置
  $('#ui-pickerc-footer-reset').onclick = () => {
    resetFn();
  };
  // 绑定事件-拖拽
  window.addEventListener('mousemove', dargFn);
  // 绑定事件-取消拖拽
  window.addEventListener('mouseup', cancelDargFn);
  // 绑定事件-点击定位色块
  contents.children[0].children[0].onmousedown = e => {
    inderCursurFn(e);
  };
  // 绑定事件-点击定位取色滑块
  contents.children[0].children[1].onmousedown = e => {
    inderThumbFn(e);
  };
  // 绑定事件-点击定位透明滑块
  contents.children[1].onmousedown = e => {
    inderPellucidityFn(e);
  };
}
// 目标点击显示/隐藏
function changeHide() {
  let dom = document.getElementById('ui-pickerc');
  let visible = dom.style.display;
  dom.style.display = visible === 'none' ? 'block' : 'none';
  if (visible === 'none') {
    opsitionFn();
  }
}
// 点击空白判断
function onSpaceFn(e) {
  if (e.target.classList.contains('ui-color-cancel')) return;
  if (outside) {
    outside = false;
  } else {
    let dom = document.getElementById('ui-pickerc');
    if (dom.style.display === 'block') changeHide();
  }
}
// 重置
function resetFn() {
  color = 'rgba(255,0,0,1)';
  thumbColor = color;
  thumbTop = 0;
  cursor = {
    top: 0,
    right: 0
  };
  pellucidityRight = 0;
  updateFn();
}
// 确认事件
function confirmFn() {
  changeHide();
  pickercOption.confirm(color, 2);
}
// fn 拖拽
function dargFn(e) {
  //   console.log(thumbDarg, pellucidityDarg, cursorDarg);
  if (thumbDarg) dargThumbFn(e);
  if (pellucidityDarg) dargPellucidityFn(e);
  if (cursorDarg) dargCursorFn(e);
}
// fn 取消拖拽
function cancelDargFn() {
  cursorDarg = false;
  thumbDarg = false;
  pellucidityDarg = false;
}
// fn 点击定位取色器
function inderCursurFn(e) {
  cursorDarg = true;
  if (!e.target.className.includes('ui-pickerc-panel-left-cursor')) {
    const right = 280 - e.layerX;
    const top = e.layerY;
    cursor = {
      right: right,
      top: top
    };
    color = colorCursor(thumbColor, right / 2.8, top / 1.8);
    updateFn();
  }
}
// fn 拖拽取色器
function dargCursorFn(e) {
  let right = cursor.right - e.movementX;
  let top = cursor.top + e.movementY;
  right = right < 0 ? 0 : right;
  right = right > 280 ? 280 : right;
  top = top < 0 ? 0 : top;
  top = top > 180 ? 180 : top;
  cursor = {
    right: right,
    top: top
  };
  color = colorCursor(thumbColor, right / 2.8, top / 1.8);
  updateFn();
}
// fn 点击定位取色滑块
function inderThumbFn(e) {
  thumbDarg = true;
  if (!e.target.className.includes('ui-pickerc-silder-thumb')) {
    thumbTop = e.layerY;
    thumbColor = getColor(e.layerY / 18);
    const result = colorCursor(thumbColor, cursor.right / 2.8, cursor.top / 1.8);
    color = rgbOpacity(result, 1 - pellucidityRight / 280);
    updateFn();
  }
}
// fn 拖拽取色滑块
function dargThumbFn(e) {
  let top = thumbTop + e.movementY;
  top = top < 0 ? 0 : top;
  top = top > 180 ? 180 : top;
  thumbTop = top;
  thumbColor = getColor(top / 18);
  const result = colorCursor(thumbColor, cursor.right / 2.8, cursor.top / 1.8);
  color = rgbOpacity(result, 1 - pellucidityRight / 280);
  updateFn();
}
// fn 点击定位透明滑块
function inderPellucidityFn(e) {
  pellucidityDarg = true;
  if (!e.target.className.includes('ui-pickerc-pellucidity-thumb')) {
    const right = 280 - e.layerX;
    pellucidityRight = right;
    color = rgbOpacity(color, 1 - right / 280);
    updateFn();
  }
}
// fn 拖拽透明滑块
function dargPellucidityFn(e) {
  let right = pellucidityRight - e.movementX;
  right = right < 0 ? 0 : right;
  right = right > 280 ? 280 : right;
  pellucidityRight = right;
  color = rgbOpacity(color, 1 - right / 280);
  updateFn();
}
// update
function updateFn() {
  colorText = color;
  const contents = $('#ui-pickerc').children[0];
  // 更新输入框
  let inputDom = contents.children[2].children[0];
  inputDom.value = colorText;
  // 更新色块
  const cursorDom = $('#ui-pickerc-panel-left-cursor');
  cursorDom.style.cssText = `top:${cursor.top}px;right:${cursor.right}px`;
  contents.children[0].children[0].style.cssText = `background:${thumbColor}`;
  // 更新取色器滑块
  const thumbDom = $('#ui-pickerc-silder-thumb');
  thumbDom.style.cssText = `top:${thumbTop}px`;
  // 更新透明背景色
  const pellucidityBgDom = $('#ui-pickerc-pellucidity-bg');
  pellucidityBgDom.style.cssText = `background:linear-gradient(to right, rgba(12, 244, 115, 0) 0%,${thumbColor} 100%)`;
  // 更新透明滑块
  const pellucidityDom = $('#ui-pickerc-pellucidity-thumb');
  pellucidityDom.style.cssText = `right:${pellucidityRight}px`;
  // 更新结果展示
  const boardDom = $('#ui-pickerc-footer-board-bg');
  boardDom.style.cssText = `background:${color}`;
}
// 打开时自动调整位置
function opsitionFn(value = targetParam) {
  targetParam = value;
  const dom = $(`#${pickercId}`);
  const target = $(`#${targetParam.id}`);
  const targetClient = target.getBoundingClientRect();
  const leftNum = 0; // 间隙
  let left = 0,
    top = 0;
  // right模式
  switch (mode) {
    case 'right':
      left = targetClient.left + target.clientWidth + leftNum;
      top = targetClient.top + target.clientHeight - dom.clientHeight;
      // 判断右边是否被遮挡-是否需要改为左边模式
      if (left + dom.clientWidth > window.innerWidth) {
        left = left - dom.clientWidth - target.clientWidth - leftNum * 2;
      }
      break;
  }
  dom.style.cssText = `${dom.style.cssText};left: ${left}px;top: ${top}px;`;
}
